<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>产品列表</title>
<meta name="keywords"  content="KEYWORDS..." />
<meta name="description" content="DESCRIPTION..." />
<meta name="author" content="DeathGhost" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name='apple-touch-fullscreen' content='yes'>
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="address=no">
<link rel="icon" href="/1/images/icon/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/1/images/icon/apple-touch-icon-57x57-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/1/images/icon/apple-touch-icon-120x120-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="196x196" href="/1/images/icon/apple-touch-icon-196x196-precomposed.png">
<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="/1/css/style.css" />
<script src="/1/js/jquery.js"></script>
<script src="/vendor/layer/layer.js"></script>
<script>
$(document).ready(function(){
    $(".drop_icon").click(function(){
        $(".drop_list").toggle();
        $(".drop_list li a").click(function(){
            $(this).parents(".drop_list").hide();
        });
    });
    $(".price-sort").click(function(){
        if ($(this).hasClass('price_desc')) {
            location.href='?cate_id={{request('cate_id')}}&sort=price_asc';
        } else if ($(this).hasClass('price_asc')) {
            location.href='?cate_id={{request('cate_id')}}';
        } else {
            location.href='?cate_id={{request('cate_id')}}&sort=price_desc';
        }
    });
    $(".sale-sort").click(function(){
        if ($(this).hasClass('sale_desc')) {
            location.href='?cate_id={{request('cate_id')}}&sort=sale_asc';
        } else if ($(this).hasClass('sale_asc')) {
            location.href='?cate_id={{request('cate_id')}}';
        } else {
            location.href='?cate_id={{request('cate_id')}}&sort=sale_desc';
        }
    });
});
</script>
</head>
<body style="background:white;">
<!--header-->
<header>
 <a href="/" class="iconfont backIcon">&#60;</a>
 <h1>商品列表</h1>
 <a href="/home/home/search" class="rt_searchIcon">&#63;</a>
</header>
<div style="height:1rem;"></div>
 <!--asc->1[升序asc_icon];des->0[降序des_icon]-->
 <ul class="sift_nav">
  <li>
   <a class="nav_li drop_icon">商品分类</a>
   <ul class="drop_list">
       <li>
           <a href="?" class="{{request('cate_id') == '' ? 'active' : ''}}">
               全部
           </a>
       </li>
    @foreach($cateList as $val)
        <li>
            <a href="?cate_id={{$val['id']}}" class="{{request('cate_id') == $val['id'] ? 'active' : ''}}">
                {{$val['name']}}
            </a>
        </li>
    @endforeach
   </ul>
  </li>
  <li><a class="price-sort des_icon {{strpos(request('sort'), 'price_') !== false ? request('sort') : ''}}">价格</a></li>
  <li><a class="sale-sort des_icon {{strpos(request('sort'), 'sale_') !== false ? request('sort') : ''}}">销量优先</a></li>
 </ul>
<!--productList-->
<section class="productList">
  <ul>
   @foreach($goodsList as $goods)
    <li>
     <a href="/detail?id={{$goods['id']}}" class="goodsPic">
      <img src="{{preg_replace('/,.*/', '', $goods['pic'])}}"/>
     </a>
     <div class="goodsInfor">
      <h2>
       <a href="/detail?id={{$goods['id']}}">{{$goods['name']}}</a>
      </h2>
      <p>
       <del>{{$goods['origin_price']}}</del>
      </p>
      <p>
       <strong class="price">{{$goods['price']}}</strong>
      </p>
      <a class="addToCart" onclick="addCart(this, '{{$goods['id']}}')" data-id="">&#126;</a>
     </div>
    </li>
   @endforeach
  </ul>
    <div style="height:.65rem;margin:.23rem auto;">
        @if(count($goodsList) > 0)<a class="more_btn" onclick="loadMoreGoods()">加载更多</a>@endif
    </div>
</section>
<!--floatCart-->
@include('home.1.public-cart')
<script>
    var page = 1;
    function loadMoreGoods() {
        page++;
        layer.load(1, {shade: [0.2,'#999']});
        $.get(location.href, {page: page}, function (res) {
            layer.closeAll();
            if (res.data.length === 0) {
                $('.more_btn').hide();
            } else {
                var htmlItem;
                var htmlContent = '';
                for (var i = 0; i < res.data.length; i++) {
                    htmlItem = res.data[i];
                    htmlContent += '<li>\
                    <a href="/detail?id=' +  htmlItem.id + '" class="goodsPic">\
                        <img src="' + htmlItem.pic.replace(/,.*/, '') + '"/>\
                    </a>\
                    <div class="goodsInfor">\
                        <h2><a href="/detail?id=' +  htmlItem.id + '">' + htmlItem.name + '</a></h2>\
                        <p><del>' + htmlItem.origin_price + '</del></p>\
                        <p><strong class="price">' + htmlItem.price + '</strong></p>\
                        <a class="addToCart" onclick="addCart(this, ' + htmlItem.id + ')">&#126;</a>\
                    </div>\
                </li>';
                }

                $('.productList ul').append(htmlContent);
            }
        });
    }
</script>
</body>
</html>
